<template>
  <div class="home_index">
    <!-- 总体情况 -->
    <div class="content-box-top">
      <div class="title font14 ma30-15">
        <p>总体情况</p>
      </div>
      <div class="content-box-vis pa15">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple grid-con-1">
              <div class="bg-purple-box">
                <div class="font14">我的活动</div>
                <p class="font36 bold">{{ infoNum.activity_num }}</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple grid-con-2">
              <div class="bg-purple-box">
                <div class="font14">我的团队</div>
                <p class="font36 bold">{{ infoNum.team_num }}</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple grid-con-3">
              <div class="bg-purple-box">
                <div class="font14">总浏览量</div>
                <p class="font36 bold">{{ infoNum.view_num }}</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple grid-con-4">
              <div class="bg-purple-box">
                <div class="font14">总参加量</div>
                <p class="font36 bold">{{ infoNum.activity_join_num }}</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 财务状况 -->
    <div class="finance-box">
      <div class="title font14 ma30-15">
        <p>财务状况</p>
      </div>
      <div class="finance-box-fix pa15">
        <div>
          <div class="font14">近一年的收益</div>
          <p class="font36 bold">¥{{ moneyNum.money_out }}</p>
        </div>
        <div>
          <div class="font14">账户余额</div>
          <p class="font36 bold">¥{{ moneyNum.money }}</p>
        </div>
      </div>
    </div>
    <!-- 活动 -->
    <div class="ma30-15">
      <div class="activity-doxs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="收藏的活动" name="first">
            <el-row :gutter="20">
              <el-col
                :span="6"
                v-for="(neirong, d) in this.activityList"
                :key="d"
              >
                <div class="grid-content bg-purple">
                  <div class="activity">
                    <div>
                      <router-link
                        :to="{
                          path: '/hotshow',
                          query: { id: neirong.activity_id },
                        }"
                        class="bl over"
                        ><img :src="$api + neirong.image" class="w100" alt=""
                      /></router-link>
                      <div class="content1">
                        <div class="data font12">
                          活动时间：{{ neirong.create_time | formatDate }}
                        </div>
                        <router-link
                          :to="{
                            path: '/hotshow',
                            query: { id: neirong.activity_id },
                          }"
                          class="bl name line1 font14"
                          >{{ neirong.title }}
                        </router-link>
                        <div class="address text font12">
                          <i class="iconfont icon-shouhuodizhi"></i
                          >{{ neirong.city }}
                        </div>
                        <div class="people clearfix font12">
                          <div class="fl clearfix">
                            <div class="tx_img">
                              <img :src="$api + neirong.organizer.avatar" alt />
                            </div>
                            <div>{{ neirong.organizer.nickname }}</div>
                          </div>
                          <div class="fr">
                            <i class="iconfont icon-yanjing"></i>
                            {{ neirong.views }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-empty v-show="showEmpty">
              <router-link to="/hotlist" target="_blank" class="qukankan"
                >去看看</router-link
              >
            </el-empty>
          </el-tab-pane>
          <el-tab-pane label="收藏的团队" name="second">
            <el-row :gutter="20">
              <el-col :span="6" v-for="(neirong, d) in this.teamList" :key="d">
                <div class="grid-content bg-purple">
                  <div class="activity">
                    <div>
                      <router-link
                        :to="'/hotteamshow/' + neirong.activity_id"
                        class="bl over"
                        ><img :src="$api + neirong.image" class="w100" alt=""
                      /></router-link>
                      <div class="content">
                        <router-link
                          :to="'/hotteamshow/' + neirong.activity_id"
                          class="bl name line2"
                          >{{ neirong.name }}
                        </router-link>
                        <div class="text line2" v-html="neirong.content"></div>
                        <div class="address text">
                          <i class="iconfont icon-renyuan"></i>成员人数:{{
                            neirong.join_num
                          }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-empty v-show="showEmpty1">
              <router-link to="/hotteamlist" target="_blank" class="qukankan"
                >去看看</router-link
              >
            </el-empty>
          </el-tab-pane>
          <el-tab-pane label="我的足迹" name="third">
            <el-row :gutter="20">
              <el-col
                :span="6"
                v-for="(neirong, d) in this.searchList"
                :key="d"
              >
                <div class="grid-content bg-purple">
                  <div class="activity">
                    <div>
                      <router-link
                        :to="{ path: '/hotshow', query: { id: neirong.a_id } }"
                        class="bl over"
                        ><img :src="$api + neirong.a_image" class="w100" alt=""
                      /></router-link>
                      <div class="content1">
                        <div class="data font12">
                          活动时间：{{ neirong.a_start_date }}
                        </div>
                        <router-link
                          :to="{ path: '/hotshow', query: { id: neirong.id } }"
                          class="bl name line1 font14"
                          >{{ neirong.a_title }}
                        </router-link>
                        <div class="address text font12">
                          <i class="iconfont icon-shouhuodizhi"></i
                          >{{ neirong.a_address }}
                        </div>
                        <div class="people clearfix font12">
                          <div class="fl clearfix">
                            <div class="tx_img">
                              <img :src="$api + neirong.organizer.avatar" alt />
                            </div>
                            <div>{{ neirong.organizer.nickname }}</div>
                          </div>
                          <div class="fr">
                            <i class="iconfont icon-yanjing"></i>
                            {{ neirong.a_views }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-empty v-show="showEmpty2">
              <router-link to="/hotlist" target="_blank" class="qukankan"
                >去看看</router-link
              >
            </el-empty>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "../assets/data.js";
export default {
  data() {
    return {
      activeName: "first",
      infoNum: [],
      moneyNum: [],
      activityList: [],
      teamList: [],
      searchList: [],
      showEmpty: true, //判断为空是否显示
      showEmpty1: true, //判断为空是否显示
      showEmpty2: true, //判断为空是否显示
    };
  },
  // 时间戳
  filters: {
    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  methods: {
    handleClick(tab, event) {
      //console.log(tab, event);
    },
    getUserInfo() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/user/userinfo")
        .then(function (response) {
          that.infoNum = response.data.data;
          //console.log("infoNum", that.infoNum);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getmoneyInfo() {
      var that = this;
      this.$axios
        .get(this.$api + "//api//money/info")
        .then(function (response) {
          that.moneyNum = response.data.rows[0];
          //console.log("money", that.moneyNum);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getactivityList() {
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/collect/index?page_no=1&page_size=10&sort&order=desc&search=collect_type:activity;"
        )
        .then(function (response) {
          that.activityList = response.data.data.data;
          //console.log("活动收藏", that.activityList);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getteamList() {
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/collect/index?page_no=1&page_size=10&sort&order=desc&search=collect_type:team;"
        )
        .then(function (response) {
          that.teamList = response.data.data.data;
          //console.log("团队收藏", that.teamList);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getsearchList() {
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/history/index?page_no=1&page_size=10&sort&order=desc&search="
        )
        .then(function (response) {
          that.searchList = response.data.data.data;
          //console.log("我的足迹", that.searchList);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
  },
  mounted() {
    this.getUserInfo();
    this.getmoneyInfo();
    this.getactivityList();
    this.getteamList();
    this.getsearchList();
  },
  watch: {
    activityList(newVal, oldVal) {
      if (this.activityList.length > 0) {
        this.showEmpty = false;
      } else {
        //为空就显示图片
        this.showEmpty = true;
      }
    },
    teamList(newVal, oldVal) {
      if (this.teamList.length > 0) {
        this.showEmpty1 = false;
      } else {
        //为空就显示图片
        this.showEmpty1 = true;
      }
    },
    searchList(newVal, oldVal) {
      if (this.searchList.length > 0) {
        this.showEmpty2 = false;
      } else {
        //为空就显示图片
        this.showEmpty2 = true;
      }
    },
  },
};
</script>

<style scoped>
.ma30-15 {
  position: relative;
}
.qukankan {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color: #fff;
  background: #4285f4;
  border: 1px solid #4285f4;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.qukankan:hover {
  background: transparent;
  color: #4285f4;
}
.activity .people .tx_img img {
  height: 100%;
  width: 100%;
}
.activity-doxs .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 15px;
  left: 0;
}
.activity-doxs .el-tabs__item {
  margin: 0 2.1875rem 0 0 !important;
}
.activity-doxs .el-tabs__item:hover:before,
.activity-doxs .el-tabs__item:before {
  background: #409eff !important;
}
.bg-purple {
  margin-bottom: 0.9375rem;
}
html {
  height: 100% !important;
  overflow-y: hidden !important;
}
.content-box-top .content-box-vis {
  background: #fff;
  border-radius: 0.4375rem;
  text-align: center;
}
.content-box-top .el-col {
  border-radius: 0.75rem;
}
.content-box-top .bg-purple-dark {
  background: #99a9bf;
}
.content-box-top .bg-purple {
  background: #d3dce6;
}
.content-box-top .bg-purple-light {
  background: #e5e9f2;
}
.content-box-top .grid-content {
  border-radius: 0.75rem;
  min-height: 10.3125rem;
  position: relative;
}
.content-box-top .grid-content .bg-purple-box {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: 0;
  width: 100%;
}
.content-box-top .grid-content .bg-purple-box div {
  color: #272828;
}
.content-box-top .grid-content .bg-purple-box p {
  font-weight: bold;
}
.content-box-top .row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.content-box-top .grid-con-1 .bg-purple-box p {
  color: #4285f4;
}
.content-box-top .grid-con-1 {
  background: rgba(25, 137, 250, 0.08);
}
.content-box-top .grid-con-2 .bg-purple-box p {
  color: #de5044;
}
.content-box-top .grid-con-2 {
  background: rgba(222, 80, 68, 0.08);
}
.content-box-top .grid-con-3 .bg-purple-box p {
  color: #ffce45;
}
.content-box-top .grid-con-3 {
  background: rgba(255, 206, 69, 0.08);
}
.content-box-top .grid-con-4 .bg-purple-box p {
  color: #19a15f;
}
.content-box-top .grid-con-4 {
  background: rgba(25, 161, 95, 0.08);
}
.finance-box-fix {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  background: #fff;
  text-align: center;
  padding: 1.875rem 0;
  border-radius: 0.4375rem;
}
.finance-box-fix > div {
  -webkit-flex: 1;
  flex: 1;
}
.finance-box-fix > div:nth-of-type(1) {
  border-right: 1px solid #f0f2f5;
}
.finance-box-fix > div .font36 {
  color: #4285f4;
}
.activity > div {
  border-radius: 0.625rem;
  border: solid 1px #dedede;
  overflow: hidden;
}
.activity .data {
  color: #848484;
}
.activity .content1 {
  padding: 1rem 0.8rem 1rem;
}
.activity .name {
  line-height: 1.875rem;
  font-weight: 600;
  color: #000000;
}
.activity .address {
  margin: 0.25rem 0 !important;
  line-height: 1.5rem;
}
.activity .address i {
  color: #de5044;
  font-size: 1.25rem;
  margin-right: 0.625rem;
  position: relative;
  top: 0.125rem;
}
.activity .over img {
  height: 17.5rem;
  object-fit: cover;
  border-radius: 0.625rem 0.625rem 0px 0px;
}
.activity .over {
  border-radius: 0.625rem 0.625rem 0px 0px;
}
.activity .people {
  line-height: 3.125rem;
  color: #848484;
}
.activity .people .tx_img img {
  object-fit: cover;

  border-radius: 50%;
  margin-right: 0.5rem;
  display: inline-block;
}
.activity .people .fl div {
  float: left;
}
.mb30 {
  margin-bottom: 1.875rem;
}
.mb45 {
  margin-bottom: 2.8125rem;
}
.activity > div:hover {
  border-color: #de5044;
}
.activity > div:hover .over img {
  transform: scale(1.1);
}
.activity > div:hover .name {
  color: #de5044;
}
.activity-doxs .el-tabs__content .el-tab-pane {
  background: #fff;
  padding: 1.25rem 1.25rem 0.3125rem;
  border-radius: 0.4375rem;
}
@media (max-width: 990px) {
  .el-col-6 {
    width: 50%;
  }
}
@media (max-width: 767px) {
  .activity .over img {
    height: 11rem;
  }
  .font36 {
    font-size: 30px;
  }
}
@media (max-width: 500px) {
 .ma30-15  .el-col-6 {
     width: 100%;
   }
}
</style>

<style>
.home_index .el-tabs__nav-wrap .el-tabs__item {
  font-size: 1rem !important;
}
</style>
